<template>

  <!-- <el-button type="primary" @click="jumpShow">点击跳转查看</el-button>
  <el-button type="primary" @click="jumpEdit">点击跳转编辑</el-button> -->
  <el-row>
    <!-------------------左侧表单选择----------------------->
    <el-col :span="4">
      <!-- <el-aside width="100%"  style="background-color: rgb(238, 241, 246);height: 700px"> -->
      <switchForm :form-data="formData" @editerOpen="editerOpen" />
      <div style="clear: both; padding: 20px 0">
        <div v-for="(item, index) in formFixedOne" :key="index">
          <div
              @click="addForm(item.id)"
              style="
                float: left;
                padding: 4px 4px;
                text-align: center;
                background: #ffffff;
                border: 1px solid #cfcfcf;
                min-width: 40px;
                min-height: 40px;
              "
          >
            <div>
              <img :src="item.icon" alt="" />
            </div>
            <div style="font-size: small">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div style="clear: both; padding: 20px 0"></div>
    </el-col>
    <!----------------中间显示表单------------------->
    <el-col :span="10">
      <el-container style="height: 800px; border: 1px solid #eee;">
        <el-main>
          <Form
              :form-data="formData"
              @childHandler="childHandler"
              ref="change"
          />

        </el-main>
      </el-container>
    </el-col>
    <!----------单个表单进行修改------------>
    <el-col
        :span="10"
        style="
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
          padding: 20px;
          margin-left: 20px;
        "
        class="layout"
    >
      <FormEdit :form-one="formOne" />
    </el-col>
  </el-row>

</template>

<script>
import {getIndex,getForm} from "@/api";
import Form from "@/components/public/Form";
import FormEdit from "@/components/public/FormEdit";
import switchForm from "@/components/public/switchForm";
export default {
  name: 'HelloWorld',
  components: {
    Form,
    FormEdit,
    switchForm
  },
  data(){
    return {
      formFixedOne: [],  //左
      formFixedTwo:[],  //左
      formData: [],   //中
      formOne: []     //右
    }
  },
  created() {
    this.getData()
    // console.log(this.formData)
  },
  methods: {
    editerOpen(data) {
      console.log(data, "zujainchaunzhi");
      // this.$nextTick(() => {
      //   this.$refs.change.initEditor();
      // });
    },
    jumpEdit() {
      this.$router.push({ path: "/edit" });
    },
    jumpShow() {
      this.$router.push({ path: "/index" });
    },
    //获取固定的表单结构
    getData() {
      let params = {};
      getIndex(params)
          .then((res) => {
            console.log(res.data, "res");
            let data = res.data;
            data.some((item) => {
              if (item.is_commonly == 1) {
                this.formFixedOne.push(item);
              } else {
                this.formFixedTwo.push(item);
              }
              if (res.is_disabled == "true" || res.is_disabled == true) {
                res.is_disabled = true;
              } else {
                res.is_disabled = false;
              }
            });
            // console.log(res.data)
          })
          .catch((error) => console.log(error));
    },
    //添加一条表单
    addForm(id) {
      // console.log(id)
      let params = { id: id };
      getForm(params)
          .then((res) => {
            // console.log(res.data.data)
            res = res.data.data;
            if (res.is_required == "true" || res.is_required == true) {
              res.required = { required: true };
            } else {
              res.required = { required: false };
            }
            if (res.is_disabled == "true" || res.is_disabled == true) {
              res.is_disabled = true;
            } else {
              res.is_disabled = false;
            }
            //如果是单选框
            if (res.type == "radio") {
              let arr = [];
              for (let i = 0; i < res.data.length; i++) {
                arr.push({ name: res.data[i] });
              }
              console.log(arr);
              res.radioData = arr;
              console.log(res);
            }
            this.formData.push(res);
          })
          .catch((error) => console.log(error));
    },
    //接收选中框传来的index索引
    childHandler(index) {
      //接收子组件传来的值
      let formData = this.formData;
      let data = [];
      formData.some((item, indexs) => {
        if (indexs == index) {
          //赋值到单个表单中进行处理
          if (item.is_required == "true" || item.is_required == true) {
            item.is_required = true;
          } else {
            item.is_required = false;
          }
          data = item;
        }
      });
      this.formOne = data;
      console.log(data);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
.hello {
  position: relative;
}
.layout {
  position: fixed;
  right: 0;
}

</style>
